<template>
  <div class="header" :style="{ background: `${configData.bgColor}` }">
    <div class="innerBox">

      <div class="header-logo" @click="gotohome">
        <!-- <img src="../../static/imgs/logo.png" alt=""> -->
        <p class="title" :style="{color: `${configData.fontColor}` }">{{ $t('assemble.网易标签订购系统') }} <span style="font-size: 16px;">V2.0</span> </p>
      </div>
      <div class="header-content">
        <div class="header-content-left" :style="{color: `${configData.fontColor}` }">
          <div class="line" style="margin-right: 20px;"></div>
          <div class="curpointer" @click="gotohome">{{ $t('assemble.采购') }}</div>
          <div class="curpointer" @click="gotoOrder" style="margin: 0 30px;">{{ $t('assemble.订单管理') }}</div>
          <div class="curpointer" @click="gotoMine">{{ $t('assemble.账号中心') }}</div>
        </div>
        <div class="header-content-rigth" :style="{color: `${configData.fontColor}` }">
          <div v-if="value == 0" class="curpointer newbtn" @mouseenter="shownewslist">{{ $t('assemble.消息通知') }}</div>
          <el-badge v-else :value="value" class="item">
            <div class="curpointer newbtn" @mouseenter="shownewslist" @mouseleave="closenewslist">{{ $t('assemble.消息通知')
            }}
            </div>
          </el-badge>
          <div class="curpointer" @click="showhandle">{{ $t('assemble.退出登录') }}</div>
          <!-- 消息列表 -->
          <div class="newslist" ref="newsbox" v-if="newsbox_show" @mouseleave="closenewslist">
            <div class="newsitem" v-for="(item, index) in newsdataList">
              <p class="title"><span style="margin-right: 10px;">{{ item.type }}</span><span>{{ item.title }}</span></p>
              <p class="title" style="width:370px">{{ item.brief }}</p>
              <p class="title" style="width:370px">{{ item.brief_english }}</p>
              <div class="bottombox">
                <p>{{ item.datetime }}</p>
              </div>
            </div>
          </div>
        </div>
        <div @click="handleChangelang">
          <img v-if="lang == 'zh'" src="../../static/imgs/zh.png"
            style="width: 50px;height: 22px;cursor: pointer;margin-top: 8px;" alt="">
          <img v-if="lang == 'en'" src="../../static/imgs/en.png"
            style="width: 50px;height: 22px;cursor: pointer;margin-top: 8px;" alt="">
        </div>
      </div>
      <el-dialog :title="$t('assemble.退出')" :visible.sync="centerDialogVisible" width="20%" center :modal="false">
        <p style="text-align: center;">{{ $t('assemble.您确定要退出吗') }}?</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">{{ $t('assemble.取消') }}</el-button>
          <el-button type="primary" @click="exit">{{ $t('assemble.确定') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getmessagelist, getmessagecount } from "../../utils/api"
export default {
  data() {
    return {
      newsbox_show: false,
      newsdataList: [],
      value: 0,
      centerDialogVisible: false,
      selectedOption: '',
      lang: 'en',
      configData: {},

    }
  },
  mounted() {
    if (localStorage.getItem("langtype")) {
      this.$i18n.locale = localStorage.getItem("langtype")
      this.lang = localStorage.getItem("langtype")
    } else {
      this.$i18n.locale = 'en'
      this.lang = 'en'
    }


    if (!localStorage.getItem('token')) {
      this.$router.push({ path: '/login' })
    } else {
      this.getmessagelist()
      this.getmessagecount()
    }
    this.configData = JSON.parse(localStorage.getItem('config'))

  },
  methods: {
    handleChangelang() {

      if (this.$i18n.locale == 'en') {
        this.$i18n.locale = 'zh'
        this.lang = 'zh'

      } else {
        this.$i18n.locale = 'en'
        this.lang = 'en'

      }
      localStorage.setItem("langtype", this.$i18n.locale)
      this.$emit('data-event',true);
      // window.location.reload();
    },
    checkAddZero(m) {
      return m < 10 ? '0' + m : m;
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    },
    async getmessagelist() {
      let res = await getmessagelist()
      if (res.code == 1) {
        // console.log("消息列表", res)

        res.data.forEach((item, index) => {
          item.datetime = this.getLocalTime(item.createtime)
        })
        this.newsdataList = res.data
        // if (res.data.length > 0) {
        //   this.newsdataList = res.data
        //   let data = JSON.parse(localStorage.getItem("newslist"))
        //   if (data != null) {
        //     this.newsdataList = [...this.newsdataList, ...data]
        //   }
        //   localStorage.setItem("newslist", JSON.stringify(this.newsdataList))
        // } else {
        //   this.newsdataList = JSON.parse(localStorage.getItem("newslist"))
        // }

      }

      console.log("xiaoxi", this.newsdataList)
    },
    async getmessagecount() {
      let res = await getmessagecount()
      // console.log("未读消息数量", res)
      if (res.code == 1) {
        this.value = res.data.count
      }
    },
    showhandle() {
      this.centerDialogVisible = true

    },
    exit() {
      this.centerDialogVisible = false
      localStorage.removeItem("token")
      localStorage.removeItem("userinfo")
      localStorage.removeItem("email")
      this.$message({
        message: this.$t('assemble.已退出登录'),
        type: 'success'
      });
      this.$router.push({ path: '/login' })
    },
    shownewslist() {
      this.newsbox_show = true
    },
    closenewslist() {
      this.newsbox_show = false
    },
    gotohome() {
      this.$router.push({ path: '/home' })
    },
    gotoMine() {
      this.$router.push({ path: '/mine' })

    },
    gotoOrder() {
      this.$router.push({ path: '/mine/orderlist' })
    }
  }
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 60px;
  background: #E00000;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  position: fixed;
  z-index: 999;


  .innerBox {
    width: 1200px;
    margin: 0 auto;
    // background-color: pink;
    padding: 8px 85px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    top: 0;
    z-index: 99;


    .header-logo {
      // width: 300px;
      height: 56px;
      cursor: pointer;
      margin-top: -10px;

      .title {
        // color: white;
        font-size: 16px;
        line-height: 36px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .header-content {
      display: flex;
      flex: 1;
      justify-content: space-between;

      .header-content-left {
        // width: 225px;
        display: flex;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        // color: #FFFFFF;
        line-height: 19px;
        align-items: center;
        justify-content: space-between;
        margin-left: 25px;

        .line {
          width: 1px;
          height: 36px;
          opacity: 1;
          background-color: #FFFFFF;
        }

      }

      .curpointer {
        cursor: pointer;
      }

      .header-content-rigth {
        width: 166px;
        display: flex;
        font-size: 10px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        // color: #FFFFFF;
        line-height: 15px;
        margin-top: 11px;
        justify-content: space-between;
        position: relative;

        .newslist {
          width: 440px;
          max-height: 500px;
          background: #F8F8F8;
          border-radius: 0px 0px 10px 10px;
          position: absolute;
          right: -84px;
          top: 50px;
          padding: 20px;
          box-sizing: border-box;
          overflow-y: scroll;
          overflow-x: hidden;
          table-layout: fixed;
          word-wrap: break-word;
          word-break: break-all;
          // display: block;


          .newsitem {
            width: 400px;
            // height: 140px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            margin-bottom: 20px;
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #B1B1B1;
            line-height: 16px;
            padding: 5px 20px;
            box-sizing: border-box;
            cursor: pointer;

            .title {
              width: 350px;
              font-size: 14px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 19px;
              word-wrap: break-word;
            }

            .bottombox {
              display: flex;
              justify-content: space-between;
            }
          }
        }


      }
    }
  }
}
</style>